<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="handleClick">count is {{ count }}</button>

    <h3>{{testObj.time}}</h3>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'

// 定义属性和默认值
withDefaults(defineProps<{ msg: string }>(), {
  msg: 'default msg' // 默认值
})

// 定义事件
const emit = defineEmits(['change', 'update'])

// ref定义
const count = ref<number>(0)

// reactive定义
const testObj = reactive<any>({ time: new Date() })

function handleClick(): void {
  count.value++
  emit('change', count.value, 'abc')
}

function reset(): void {
  count.value = 0

  testObj.time = new Date()
}

// 定义组件暴露的属性
defineExpose({ reset })
</script>

<style scoped>
button {
  height: 35px;
}
</style>
